<template>
    <div class="video-container">
          <search :activeId = "active" />
        <!-- 频道列表 -->
        <van-tabs v-model="active" animated class="channel-tabs" swipeable>
            <van-tab :title="item.name" v-for="item in channels" :key="item.id">
              <!-- //李家的组件 -->
                <handpick v-if="item.id!==1" :type="item" @upDateItem="changeActiveId"/>
                <!-- 艳萍的组件 -->
                <Recommend v-else></Recommend>
            </van-tab>
            <!-- 占位符 -->
            <div slot="nav-right" class="placeholder"></div>
            <!-- 汉堡按钮 -->
            <div
                slot="nav-right"
                class="hamburger-btn"
                @click="isChannelEditShow = true"
            >
                <van-icon name="apps-o" />
            </div>
        </van-tabs>
        <!-- 频道编辑 -->
        <van-popup
            v-model="isChannelEditShow"
            closeable
            close-icon-position="top-left"
            position="bottom"
            :style="{ height: '100%' }"
        >
            <ChannelEdit
                :mychannels="channels"
                :active-index="active"
                @update-active="onUpdateActive"
            >
            </ChannelEdit>
        </van-popup>
    </div>
</template>

<script>
import { getChannel } from '@/api/ping';
import ChannelEdit from 'components/ping/channel-edit.vue';
import handpick from '../jia/Home/index.vue';
import { setItem, getItem } from '@/utils/jia-storage'
import Recommend from './components/ping/recommend.vue'
export default {
    data() {
        return {
            active: getItem('activeID') || 0,
            channels: [], // 频道列表
            isChannelEditShow: false
        };
    },
    created() {
        this.loadChannels();
    },
    methods: {
        // 获取频道列表数据
        async loadChannels() {
            try {
                // console.log(1);
                const { data } = await getChannel();
                // console.log(data);
                this.channels = data;
            } catch (err) {
                console.log(err);
            }
        },
        showPopup() {
            this.show = true;
        },
        // 接收子组件传递数据
        onUpdateActive(index, isChannelEditShow = true) {
            // console.log(index);
            this.active = index;
            // 弹窗隐藏
            this.isChannelEditShow = isChannelEditShow;
        },
        changeActiveId(val) {
            this.active = val
        }
    },
    components: {
        ChannelEdit,
        handpick,
        Recommend
    },
    watch: {
        active(newvalue) {
            setItem('activeID', newvalue)
        }
    }
};
</script>

<style scoped lang="scss">
.video-container {
   padding-top: 160px;
   padding-bottom: 140px;
    // /deep/.van-tabs__content {
    //     z-index: 2; //这里不能设置999
    // }
    /deep/.van-tabs__wrap {
        height: 80px;
        // position: fixed;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 4;
    }
    .channel-tabs {
        /deep/.van-tab {
            min-width: 150px;
            font-size: 20px;
            color: #777777;
        }
        // 激活时样式
        /deep/.van-tab--active {
            font-weight: 700;
            color: #ff9800;
            font-size: 20px;
        }
        /deep/.van-tabs__nav {
            padding-bottom: 0;
        }
        /deep/.van-tabs__line {
            bottom: 10px;
            width: 80px;
            height: 5px;
            background-color: #ff9800;
        }
        // 占位符样式
  .placeholder {
    flex-shrink: 0;
    width: 66px;
    height: 82px;
  }
        // 汉堡按钮样式
        .hamburger-btn {
            position: fixed;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 80px;
            background-color: #fff;
            opacity: 0.902;
            font-size: 50px;
        }
    }
}
/deep/.van-nav-bar__content {
    height: 80px;
}

// 弹层关闭按钮大小
/deep/.van-popup__close-icon {
    font-size: 0.6rem;
}
</style>
